<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户安全管理系统</title>
    <!-- zui-->
    <link href="./static/css/zui.min.css" rel="stylesheet"> 
	<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="./static/js/jquery.js"></script>
     <!-- ZUI Javascript组件-->
    <script src="./static/js/zui.min.js"></script>
	<!--[if lt IE 9]>
    <script src="./static/lib/ieonly/html5shiv.js"></script>
    <script src="./static/lib/ieonly/respond.js"></script>
    <![endif]-->
	<style>
        body,button, input, select, textarea,h1 ,h2, h3, h4, h5, h6 { font-family: Microsoft YaHei,'宋体' , Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;}
		.padding-0 {
		   padding: 0 !important;
		}
		.padding-sm {
		   padding: 1px !important;
		}	
		.padding-md {
		   padding: 5px !important;
		}
		.padding-lg {
		   padding: 10px !important;
		}
		
		#banner {
			height:120px;
			background: -webkit-linear-gradient(left, RGB(71,191,215), RGB(3,102,187)); /** Chrome Safari **/
            background: -moz-linear-gradient(left,RGB(71,191,215), RGB(3,102,187)); /** FireFox **/
            background: -o-linear-gradient(left, RGB(71,191,215), RGB(3,102,187));/** Opear **/ 
            background: -ms-linear-gradient(left, RGB(71,191,215), RGB(3,102,187));/** IE9 IE10 **/ 
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=RGB(71,191,215),endColorstr=RGB(3,102,187),grandientType=1); /** IE7 **/ 
            -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=RGB(71,191,215),endColorstr=RGB(3,102,187),grandientType=1); /** IE8 **/ 
            margin-bottom: 0px;
		}
        .menu-small {
            width: 100%;
        }
		.nav-menu {
		  padding-left: 0;
		  margin-bottom: 0;
		  list-style: none;
		}
		/*一级菜单*/
		.menu-first{
			height:45px;
			line-height:45px;
			background-color: #5f5b5b;
			border-bottom: 1px solid #767070;
			border-top: 1px solid #767070;
			padding: 0;
			font-size: 16px;
			font-weight: normal;
			text-align: center;
            color:white;
		}
		/*一级菜单鼠标划过状态*/
		.menu-first:hover{
			text-decoration: none;
			background-color: #585456;
			font-size: 17px;
            color:#e0d7dc;
		}
		/*二级菜单*/
		.menu-second li a{
			background-color: #5f5b5b;
			height:31px;
			line-height:31px;
			font-size: 13px;
			text-indent: 40%;
            color:white;
			position: relative;
  			display: block;
		}
		/*二级菜单鼠标划过样式*/
		.menu-second li a:hover {
			text-decoration: none;
			background-color: #5f5b5b;
			font-size: 14px;
            color:#e0d7dc;
		}
		/*二级菜单选中状态*/
		.menu-second-selected {
			background-color: #5f5b5b;
			height:31px;
			line-height:31px;
			border-right: 3px solid #f8881c;
		}
        .menu-div{
            background-color: #faf7f7;
			padding: auto;
        }
        iframe{
            width: 100%;
            height: 100%;
        }
		#context-div{
           // padding-left: 1px;
			background-color: RGB(236,236,236) ;
        }
	</style>
  </head>
  <body>
    <div id="banner" class="navbar navbar-static-top navbar-default">
    </div>
	<div class="container-fluid">
        
        <div class="row">
            <div class="col-md-2 menu-div padding-0">
                <nav class="menu">
                    <li class="nav-menu nav-heading menu-first">模块注册</li>
                    <ul class="nav-menu collapse menu-second">
					  <li><a href="http://www.baidu.com/"><i class="icon-th"></i> 说明</a></li>  
					  <li><a href="http://www.baidu.com/">约定</a></li>
					  <li><a href="/docs/start.html#files">文件目录结构</a></li>
					  <li><a href="/docs/start.html#edition">选择版本</a></li>
					  <li><a href="/docs/start.html#grunt">编译及定制</a></li>
					  <li><a href="/docs/start.html#browsers">受支持的平台</a></li>
					</ul>
				    <li class="nav-menu nav-heading menu-first">系统设置</li>
                    <ul class="nav-menu nav-list collapse menu-second">
					  <li><a href="/docs/basic.html#hello">Hello world</a></li>
					  <li><a href="/docs/basic.html#global">全局样式表</a></li>
					  <li><a href="/docs/basic.html#ie">兼容IE浏览器</a></li>
					  <li><a href="/docs/basic.html#responsive">响应式设计</a></li>
					  <li><a href="/docs/basic.html#grid">栅格系统</a></li>
					  <li><a href="/docs/basic.html#typography">文字排版</a></li>
					  <li><a href="/docs/basic.html#utilities">辅助类</a></li>
					  <li><a href="/docs/basic.html#scrollbars">滚动条</a></li>
					  <li><a href="/docs/basic.html#colorset">配色</a></li>
					  <li><a href="/docs/basic.html#themes">主题</a></li>
					</ul>
				    <li class="nav-menu nav-heading menu-first">登陆界面</li>
                    <ul class="nav-menu nav-list collapse menu-second">
					  <li><a href="/docs/controls.html#icons">图标</a></li>
					  <li><a href="/docs/controls.html#button">按钮</a></li>
					  <li><a href="/docs/controls.html#progressbar">进度条</a></li>
					  <li><a href="/docs/controls.html#labels">标签</a></li>
					  <li><a href="/docs/controls.html#textbox">文本框</a></li>
					  <li><a href="/docs/controls.html#breadcrumb">面包屑</a></li>
					  <li><a href="/docs/controls.html#images">图片</a></li>
					  <li><a href="/docs/controls.html#headers">标题</a></li>
					  <li><a href="/docs/controls.html#dividers">分隔</a></li>
					</ul>
                </nav>
               
            </div>
          <div id="context-div" class="col-md-10 padding-sm">
			  <iframe  name="context" frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes”></iframe>			
		  </div>
        </div>
    </div>
  </body>
  <script>
	 // use this script only for pages with flot graphs other wise use menu.js 
$(document).ready(function () {
  
    //$(".menu").height($(window).height()-150);
    //$("#context-div").height($(window).height()-150);
    $(".menu a").attr("target","context");
    $(".menu").addClass("menu-small");
    $('.menu').find('>li').click(function(){
            var $nav =$(this).next();
            if($nav.hasClass('collapse')){
                $('.menu').find('>ul').not($nav).children('li:not(.nav-heading)').slideUp('normal', function(){
                    $(this).closest('ul').addClass('collapse');
                });
                if($(window).width() < 767){
					
                }
                $nav.removeClass('collapse').children('li:not(.nav-heading)').slideDown('normal');
            }
            else{
                
				$nav.children('li:not(.nav-heading)').slideUp('normal', function(){$nav.addClass('collapse');});
            }
        });
  
  
    if ($(window).width() < 979) {
        $(".menu").addClass("menu-small");
        $(".page-wrap").addClass("page-small");
    }
    $("#menu-icon").click(function () {
        $(".menu").toggleClass("menu-small");
        $(".page-wrap").toggleClass("page-small");
    });
    $(".navbar").resize(function () { 
        if ($(document).width() <= 979) {
            $(".menu").addClass("menu-small");
            $(".page-wrap").addClass("page-small");
        }
        if ($(document).width() >= 979) {
            $(".menu").removeClass("menu-small");
            $(".page-wrap").removeClass("page-small");
        }
    });
});

</script>
  
</html>